<template>
    <div class="main">
        <div class="parkings">
            <el-tag id="item" type="warning">车位地址</el-tag>
            <el-input
                v-model="parkings.address"
                placeholder="请输入修改车位地址"
            ></el-input>
        </div>
        <div class="parkings">
            <el-tag id="item" type="danger">车位号</el-tag>
            <el-input
                v-model="parkings.number"
                placeholder="请输入修改车位号"
            ></el-input>
        </div>
        <div class="parkings">
            <el-tag id="item" type="danger">产权信息</el-tag>
            <el-input
                v-model="parkings.property"
                placeholder="请输入修改车位产权信息"
            ></el-input>
        </div>
        <div class="parkings">
            <el-tag id="item" type="danger">出租周期</el-tag>
            <el-input
                v-model="parkings.cycle"
                placeholder="请输入修改车位出租周期"
            ></el-input>
        </div>
        <div class="parkings">
            <el-tag id="item" type="danger">价格</el-tag>
            <el-input
                v-model="parkings.price"
                placeholder="请输入修改车位价格"
            ></el-input>
        </div>
        <el-row>
            <el-button type="primary" @click="clickRegister" round
                >修改车位</el-button
            >
        </el-row>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("parkings");
export default {
    props: {
        id: {
            type: [String],
            default: () => ({}),
        },
    },
    data() {
        return {
            parkings: {
                address: "",
                number: "",
                property: "",
                cycle: "",
                price: "",
            },
        };
    },
    async mounted() {
        // 获取车位信息
        const data = await this.getParkingsId({ _id: this.id });
        this.parkings = data;
    },
    methods: {
        // 首先获取车位信息，调用函数
        ...mapActions(["getParkingsId", "updateParkings"]),
        // 点击修改
        async clickRegister() {
            // console.log({ ...this.parkings, _id: this.id });
            const result = await this.updateParkings({
                ...this.parkings,
                _id: this.id,
            });
            if (result.status) {
                console.log("修改成功");
            } else {
                console.log("修改失败");
            }
            // 修改后跳转到所有车位页面
            this.$router.push(`/system/parkingsList`);
        },
    },
};
</script>

<style lang="scss">
.img {
    width: 100%;
    display: flex;
    justify-content: center;
}
.parkings {
    margin: auto;
    span {
        display: inline-block;
        width: 50px;
        height: auto;
    }
    width: 500px;
    display: flex;
    align-items: center;
}
.el-tag {
    height: 40px;

    vertical-align: bottom;
    line-height: 40px;
}
#item {
    width: 150px;
}
</style>